<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	request.setAttribute("basePath",basePath);
%>
<%@ include file="/resources/js/easyui/taglibs.jsp"%>
<%@ include file="/resources/js/wechat/_wechatui.jsp"%>
<%@ include file="/resources/js/easyui/_viewJS.jsp"%>
<!DOCTYPE>
<html>
<script>

	console.log("进入首页时间"+new Date().getMilliseconds());

</script>
	<head>
		<title>账目</title>
	</head>
	<body>
		<div class="loading"></div>
		<!-- header -->
		<header>
			<h3>账目</h3>
			<a href="JavaScript:;" class="top_add"></a>
			<a href="${basePath}wechat/operate/search/searchAccountView" class="top_search"></a>
		</header>
		<!-- header end -->

		<div class="page index_page">
			<!-- 今日总收入 -->
			<div class="index_allsr">
				<div class="sr_title">今日总收入<time>(${date})</time></div>
				<div class='allsr_inner'>
                    <span>
                    <fmt:formatNumber pattern="#,###0.00"
							value="${detailStatisticsDto.coinmoney+detailStatisticsDto.billmoney+detailStatisticsDto.wechatmoney/100+detailStatisticsDto.alipaymoney/100}" />
					</span>
					<br><span style="color:#ff4e00;">(单位：元)</span>
                </div>
				<div class="allsr_xq">
					<ul>
						<li><span>现金</span><span>${detailStatisticsDto.billmoney==null?'0':detailStatisticsDto.billmoney}</span></li>
						<li><span>一元硬币</span><span>${detailStatisticsDto.coinmoney==null?'0':detailStatisticsDto.coinmoney}</span></li>
						<li><span>微信</span>
							<span><fmt:formatNumber pattern="#,###0.00"
							  	value="${detailStatisticsDto.wechatmoney==null?'0':detailStatisticsDto.wechatmoney/100}" /></span>
						</li>
						<li><span>支付宝</span>
							<span><fmt:formatNumber pattern="#,###0.00"
						  		value="${detailStatisticsDto.alipaymoney==null?'0':detailStatisticsDto.alipaymoney/100}" /></span>
						</li>
						<li><span>游戏币</span><span>${detailStatisticsDto.gamecoinbalnce==null?'0':detailStatisticsDto.gamecoinbalnce}</span></li>
						<li><span>出币</span><span>${detailStatisticsDto.coinbalance==null?'0':detailStatisticsDto.coinbalance}</span></li>
						<li><span>出礼品</span><span>${detailStatisticsDto.giftbalance==null?'0':detailStatisticsDto.giftbalance}</span></li>
						<li><span>远程补币</span><span>${detailStatisticsDto.intdata1==null?'0':detailStatisticsDto.intdata1}</span></li>
					</ul>
				</div>
			</div>
			<!-- 今日总收入end -->

			<!-- 其他店 -->
			<c:choose>
				<c:when test="${!empty detailStatisticsPlaces.get(0)}">
					<c:forEach items="${detailStatisticsPlaces}" var="placeDtos">
						<div class="index_listsr">
							<div class="sr_title">${placeDtos.placeName}
								<em>
									<fmt:formatNumber pattern="#,###0.00"
								  		value="${placeDtos.coinmoney+placeDtos.billmoney+placeDtos.wechatmoney/100+placeDtos.alipaymoney/100}" />
								</em>
							</div>
							<div class="listsr_inner">
								<a href="JavaScript:;" class="sr_tab">切换百分比</a>
								<a href="${basePath}wechat/income/accounts/${placeDtos.placeid}/deviceListView" class='list_cka'>查看</a>
							</div>
						</div>
					</c:forEach>
				</c:when>
				<c:otherwise>
					<c:forEach items="${placeList}" var="place">
						<div class="index_listsr">
							<div class="sr_title">${place.address==null?'暂无数据':place.address}
								<em>0</em>
							</div>
							<div class="listsr_inner">
								<a href="JavaScript:;" class="sr_tab">切换百分比</a>
								<a href="${basePath}wechat/income/accounts/${place.placeid}/deviceListView" class='list_cka'>查看</a>
							</div>
						</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
			<!-- 其他店end -->
		</div>

		<!-- footer -->
		<%@include file="/WEB-INF/jsp/wechat/_footer.jsp"%>
		<!-- footer end -->

		<!-- top加号弹窗 -->
		<%@include file="/WEB-INF/jsp/wechat/_top.jsp"%>
		<!-- top加号弹窗 end -->

		<script>
			$(function(){
				var Arry = [];;;;;
				$(".listsr_inner").each(function(e){
					var newMain = "main"+e;
					$(this).prepend("<div id="+ newMain +" class='index_main'></div>");
					$(".index_main").css("height",$(".index_main").width()*0.7);
					var newMain = echarts.init(document.getElementById(newMain));
					Arry[e] = newMain;
				});

				// 使用刚指定的配置项和数据显示图表。
				$(".listsr_inner").each(function(e){
					<c:choose>
						<c:when test="${!empty detailStatisticsPlaces.get(0)}">
							<c:forEach items="${detailStatisticsPlaces}" var="placeDtos">
								Arry[e].setOption(getOptionLine(${placeDtos.billmoney},${placeDtos.coinmoney},
									${placeDtos.wechatmoney/100},${placeDtos.alipaymoney/100},
									${placeDtos.gamecoinbalnce},${placeDtos.coinbalance},
									${placeDtos.giftbalance},${placeDtos.intdata1}));
							</c:forEach>
						</c:when>
						<c:otherwise>
							Arry[e].setOption(getOptionLine(0,0,0,0,0,0,0,0));
						</c:otherwise>
					</c:choose>
				});

				$(".sr_tab").on('click', function(){//切换数据
					var index = $(".sr_tab").index($(this));//获取当前是第几个数据图
					if($(this).text()=="切换百分比"){
						$(this).parent().append("<em>占比率<span>(%)</span><em>");;;;;
						$(this).text("切换直方图");
						var option = getOptionPie(0,0,0,0);
						<c:if test="${!empty detailStatisticsPlaces.get(0)}">
							<c:forEach items="${detailStatisticsPlaces}" var="placeDtos" varStatus="status">
								var temp = '${status.index}';
								if(index == temp){
									option = getOptionPie(${detailStatisticsPlaces[status.index].billmoney},
											${detailStatisticsPlaces[status.index].coinmoney},
											${detailStatisticsPlaces[status.index].wechatmoney/100},
											${detailStatisticsPlaces[status.index].alipaymoney/100});
								}
							</c:forEach>
						</c:if>

					}else{
						$(this).parent().find("em").remove();
						$(this).text("切换百分比");
						var option = getOptionLine(0,0,0,0,0,0,0,0);

						<c:if test="${!empty detailStatisticsPlaces.get(0)}">
							<c:forEach items="${detailStatisticsPlaces}" var="placeDtos" varStatus="status">
								var temp = '${status.index}';
								if(index == temp){
									option = getOptionLine(${detailStatisticsPlaces[status.index].billmoney},
									${detailStatisticsPlaces[status.index].coinmoney},
									${detailStatisticsPlaces[status.index].wechatmoney/100},
									${detailStatisticsPlaces[status.index].alipaymoney/100},
									${detailStatisticsPlaces[status.index].gamecoinbalnce},
									${detailStatisticsPlaces[status.index].coinbalance},
									${detailStatisticsPlaces[status.index].giftbalance},
									${detailStatisticsPlaces[status.index].intdata1});
								}
							</c:forEach>
						</c:if>
					}
					Arry[index].setOption(option);
				});

				window.onresize = function () {
					$(".listsr_inner").each(function(e){
						Arry[e].resize();
					});
					$(".index_main").css("height",$(".index_main").width()*0.7);
				};

			});

			//生成柱状图
			function getOptionLine(val1,val2,val3,val4,val5,val6,val7,val8){
				return {
					xAxis: {
						data: ["现金","一元硬币","微信","支付宝","游戏币","出币","出礼品","远程补币"],
						axisLabel :{interval:0},
						splitLine:{show:false},
						show : true
					},
					yAxis: {
						splitLine:{show:false},
						axisLabel : {formatter: ""},
						show : true
					},
					series: [{
						// name: '百分比',
						type: 'bar',
						barWidth : 15,//柱图宽度
						symbol: true,
						itemStyle: {
							normal: {
								label: {
									show: true,
									textStyle: {color: '#ccc'},
									position: 'top'
								},
							},
						},
						data: [
							{value:val1,itemStyle:{normal:{color:'#ffc600'}}},
							{value:val2,itemStyle:{normal:{color:'#ff8a00'}}},
							{value:val3,itemStyle:{normal:{color:'#11cd6e'}}},
							{value:val4,itemStyle:{normal:{color:'#56abe4'}}},
							{value:val5,itemStyle:{normal:{color:'#ffa200'}}},
							{value:val6,itemStyle:{normal:{color:'#0060ff'}}},
							{value:val7,itemStyle:{normal:{color:'#7eff00'}}},
							{value:val8,itemStyle:{normal:{color:'#ff4e00'}}}
						]
					}]
				};
			}

			//生成饼状图
			function getOptionPie(val1,val2,val3,val4){
				return {
					xAxis : [{show : false}],
					yAxis : [{show : false}],
					series: [
						{
							type:'pie',
							radius: ['50%', '70%'],
							data:[
								{value:val1, itemStyle:{normal:{color:'#ffc601'}}, name:'现金'},
								{value:val2, itemStyle:{normal:{color:'#ff8a00'}}, name:'一元硬币'},
								{value:val3, itemStyle:{normal:{color:'#10cd6e'}}, name:'微信'},
								{value:val4, itemStyle:{normal:{color:'#57abe5'}}, name:'支付宝'}
							],
							itemStyle:{
								normal:{
									label:{
										show: true,
										textStyle: {color: '#c6c6c6'},
										formatter: '{b} : ({d}%)'
									},
									labelLine :{show:true}
								}
							}
						}
					]
				};
			}

		</script>
	</body>

<script>

	console.log("完成首页加载时间"+new Date().getMilliseconds());

</script>
</html>
